<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付</title>
    <!--引入vue.js库-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="/js/vue.js"></script>
    <!--vue提供的生成二维码的组件-->
    <script src="/js/vue-qriously.js"></script>
    <!-- element-ui引入样式 展示数据的-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios库  从后端获取数据-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <button @click="toPay">立即支付</button>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">

        <div>支付的金额:￥{{order.money}}元</div>
        <div>订单的状态:{{paystatus}}</div>
        <!--存放二维码的区域-->
        <qriously v-if="code_url!=''" :value="code_url" :size="338"/>
    </el-dialog>
</div>
<script>
    //js代码
    var vue = new Vue({
        el: "#app",
        data() { //存放使用的所有属性数据
            return { //方便编写表单校验
                dialogVisible:false,
                code_url:"",
                paystatus:"",
                timer1:"",
                order:{
                    money:0.01,
                    orderNum:"",
                    describe:"百度红尘",
                }
            }
        },
        created: function () {//页面初始化时，需要执行的业务可以放入该方法
            //    setInterval   每隔3秒执行    this.queryPayStatus 查看支付是否成功 状态
            //   setTimeout(function1,10000); 10秒后执行函数function1
            this.timer1=setInterval(()=>{
                this.queryPayStatus(this.order.orderNum);
            },3000)
        },
        methods: {
            //去支付，生成二维码
            toPay(){
                alert(111);
                //2021：12：12：12.900   //new Date().getTime() 获取当前时间戳  （1970-1-1 00:00:00 000 到当前时间的毫秒数）
                this.order.orderNum="order"+new Date().getTime();
                var _this = this;
                //获取code_url
                axios.post("/order/getNativeCodeUrl",this.order)
                    .then(function (response) {
                        alert(JSON.stringify(response.data));
                        _this.code_url=response.data.data.code_url;
                        alert(_this.code_url);
                        _this.dialogVisible=true;
                    })
            },
            //获取支付是否成功状态
            queryPayStatus(ordernum) {
                var _this = this;
                //axios.get("/order/getPayStatus?orderNum=" + ordernum)
                //  url = /order/getPayStatus/order123
                axios.get("/order/getPayStatus/" + ordernum)
                    .then(function (response) {
                        //注意  trade_state_desc不能随便写，这是微信平台返回给我们的
                        _this.paystatus = response.data.data.trade_state_desc;
                        if (_this.paystatus == "支付成功") {
                            _this.dialogVisible = false;
                            //清除定时任务  不让每3秒再执行
                            clearInterval(_this.timer1);
                            location.href="index.html";
                        }
                    })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }
        }
    })
</script>
</body>
</html>
